<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberstore">媒体管理</router-link>
      <router-link tag="li" to="/ymMemberstorecomboaddsubmit">套餐管理</router-link>
      <router-link tag="li" to="/ymMembermysubmitactivity">我的活动</router-link>
      <router-link tag="li" to="/ymMembersubmitmycase">我的案例</router-link>
      <div class="uploading" @click="cleanCaseId">添加案例</div>
      <!--<router-link tag="div" to="/ymMemberaddmycase" class="uploading" @click="cleanCaseId">添加案例</router-link>-->
    </ul>
    <div class="model">
      <h4>案例列表</h4>
      <div class="case">
        <dl v-for="cases in caseList">
          <img width="214px" height="140px" :src="cases.activityImgurl" />
          <dd>{{cases.caseTitle}}</dd>
          <dd>
          	<span class="span1">客户：{{cases.companyname}} &nbsp;&nbsp;</span>
          	<span class="span" @click="editor(cases.id)">编辑</span>&nbsp;&nbsp;
          	<span class="span" @click="dele(cases.id)">删除</span>
          </dd>
        </dl>
      </div>
    </div>
    <!--  分页器  -->
    <div class="paging">
      <el-pagination
        :page-size="10"
        background
        layout="prev, pager, next, jumper"
        :total="10">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-store",
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
      	user:{},
      	caseList:[],
        model: [{
          name: '我的布达拉宫',
          time: '2016-03-04~2016-04-23'
        }, {
          name: '我的布达拉宫',
          time: '2016-03-04~2016-04-23'
        }]
      }
    },
    mounted(){
    	this.getUserInfo();
    },
    methods:{
    	getUserInfo:function(){
	  		this.user = JSON.parse(localStorage.getItem("user"));
	  		this.$http.post(this.requestAddr+"/GetJson/getCaseList",{"memberId":this.user.autoId},{emulateJSON:true}).then(
	  			(res)=>{
	  				if(res.data.code == 0){
	  					if((res.data.caseList).length == 0){
	  						window.location.href = "../#/ymMembermycase"
	  						return;
	  					}
	  					this.caseList = res.data.caseList;
	  				}
	  			}
	  		)
	  	},
	  	dele:function(id){
  			this.$confirm('确认要删除该案例吗？', '需求删除申请', {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning' 
        }).then(
        	()=>{
        		this.$http.post(this.requestAddr+"/GetJson/delCaseById",{"id":id},{emulateJSON:true}).then(
        			(res)=>{
        				if(res.data.code==0){
        					alert(res.data.msg);
        					this.getUserInfo();
        				}
        			}
        		)        		
        	}
        )
	  	},
	  	editor:function(caseId){
	  		window.sessionStorage.setItem("caseId",caseId);
	  		window.location.href = "../#/ymMemberaddmycase"
	  	},
	  	cleanCaseId:function(){
	  		window.sessionStorage.removeItem("caseId");
	  		window.location.href = "../#/ymMemberaddmycase"
	  	}
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-store {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        &:nth-child(4) {
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        width: 103px;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        color: white;
        background-color: #f29600;
        text-align: center;
        border-radius: 7px;
        margin-left: 560px;
        cursor: pointer;
      }
    }
    .model {
      width: 1170px;
      height: 990px;
      background-color: white;
      margin: 0 auto;
      padding-top: 30px;
      padding-left: 30px;
      h4 {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 25px;
        margin-left: 10px;
      }
      .case {
        width: 1140px;
        dl {
          width: 214px;
          height: 220px;
          float: left;
          margin-right: 17px;
          margin-bottom: 20px;
          &:nth-child(5n) {
            margin-right: 0 !important;
          }
          dd {
            width: 100%;
            padding-left: 5px;
            margin-top: 14px;
            &:nth-child(2) {
              color: #333333;
              font-size: 16px;
            }
            &:nth-child(3) {
              color: #999999;
              font-size: 14px;
              padding-bottom: 30px;
            }
            .span1{
              display: inline-block;
              width: 130px;
            }
            .span{
              display: inline-block;
              &:hover{
                color: red;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .paging {
      width: 1200px;
      height: 35px;
      margin: 23px auto;
      text-align: center;
    }
  }

</style>
